<template>
  <view class="anchorlist">
    <view class="addzb" v-if="haszblist == 0">
      <text style="color:grey">暂无数据</text>
    </view>
    <view v-else>
      <s-pull-scroll
        ref="pullScroll"
        :back-top="true"
        :top="100"
        :footerHeight="42"
        :pullDown="pullDown"
        :preventTouchmove="true"
      >
        <view class="showanchlist" v-for="item in zblist" :key="item.anchor_id">
          <view class="zblistitem">
            <image src="https://ww1.yunjiexi.club/2020/04/14/8Qseg.jpg" mode class="avatar" />
            <text class="zbname">{{ item.real_name }}</text>
            <text class="dyid">抖音id:{{ item.third_user_id }}</text>
            <text class="errmsg" v-if="item.rpc_status == 3">{{item.error_msg}}</text>
            <span class="status" v-if="item.rpc_status == 0">尚未邀约</span>
            <span class="status" v-else-if="item.rpc_status == 1">正在邀约</span>
            <span class="status" v-else-if="item.rpc_status == 2">邀约成功</span>
            <span class="status fail" v-else>邀约失败</span>
            <span class="reInvite" v-if="item.rpc_status == 3" @tap="reInvite(item)">重新邀约</span>
          </view>
        </view>
      </s-pull-scroll>
    </view>
  </view>
</template>

<script>
import sPullScroll from "../../s-pull-scroll";
export default {
  components: {
    sPullScroll
  },
  data() {
    return {
      // 有无主播数据
      haszblist: 0,
      // 主播列表
      zblist: [],
      rank_string: "",
      anchorInfo: {},
      preanchorInfo: {},
      page: "1"
    };
  },
  mounted() {
    const token = uni.getStorageSync("token");
    if (token) {
      this.getAnchorList();
    }
  },
  onShow() {
    this.getAnchorList();
  },
  onLoad() {
    // this.getAnchorList();
    this.refresh();
  },
  methods: {
    // 邀请失败重新邀请
    reInvite(item) {
      const { anchor_id } = item;
      const obj = {
        anchor_id: anchor_id
      };
      // 传数据，调用addAnchor里的方法
      // 先用简单的方法，直接发请求
      this.$http({
        url: "/api/anchor/againInvite",
        method: "POST",
        data: obj
      }).then(res => {
        if (res.code == 401) {
          uni.reLaunch({
            url: "/pages/authorise/index"
          });
          return;
        }
        if (res.code == 1) {
          uni.showToast({
            title: res.msg
          });
          // 提交后无需重新获取列表数据，只提示是否添加成功既可，因为，是否真实邀约成功需要后台操作
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none"
          });
        }
      });
    },
    addzb() {
      this.$emit("changshow", true);
    },
    getAnchorList() {
      this.$http({
        url: "/api/anchor/lists",
        method: "GET"
      }).then(res => {
        if (res.code == 401) {
          // 未登录状态，跳转到授权页
          uni.reLaunch({
            url: "/pages/authorise/index",
            page: this.page
          });
        }
        if (!(res.data.list.length == 0)) {
          this.zblist = res.data.list;
          // 保存请求的结果
          this.preanchorInfo = res.data.list;
          this.rank_string = res.data.rank_string;
          wx.setStorageSync("rankstring", res.data.rank_string);
          this.$emit("regetList", this.rank_string);
          console.log(res.data.rank_string);
          this.haszblist = 1;
        } else {
          this.haszblist = 0;
        }
      });
    },
    refresh() {
      this.$nextTick(() => {
        this.$refs.pullScroll.refresh();
      });
    },
    pullDown(pullScroll) {
      setTimeout(() => {
        this.loadData(pullScroll);
      }, 200);
    },
    loadData(pullScroll) {
      this.getAnchorList();
      setTimeout(() => {}, 500);
      pullScroll.success();
    }
  }
};
</script>

<style lang='scss'>
.anchorlist {
  .addzb {
    color: red;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    .icon-tianjia {
      font-size: 100px;
    }
  }
  .zblistitem {
    border-bottom: 1px solid #cccccc;
    height: 5em;
    position: relative;
    text-indent: 80px;
    .avatar {
      width: 60px;
      height: 60px;
      position: absolute;
      left: 5px;
      top: 50%;
      transform: translateY(-50%);
      border: 1px solid #cccccc;
      border-radius: 50%;
    }
    .zbname {
      font-weight: bolder;
    }
    .dyid {
      display: block;
      margin-top: 15rpx;
      font-size: 23rpx;
      color: grey;
    }
    .errmsg {
      text-align: left;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 16px;
      position: absolute;
      left: 0px;
      top: 50px;
      font-size: 12px;
    }
    .uni-tag {
      position: absolute;
      right: 0;
      top: 50%;
      right: 10rpx;
      transform: translateY(-50%);
      text-indent: 0;
    }
    .status {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 10%;
      text-indent: 0;
      padding: 2px 10px;
      border-radius: 100px;
      font-size: 12px;
      background-color: #f0ad4e;
      color: #ffffff;
    }
    .fail {
      background-color: red;
    }
    .reInvite {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 30%;
      text-indent: 0;
      padding: 2px 10px;
      border-radius: 100px;
      font-size: 12px;
      background-color: #f0ad4e;
      color: #ffffff;
    }
  }
}
</style>